<!--弹弹弹-变变变-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹弹弹-变变变</title>
		<style type="text/css">
			*{margin:0px; padding:0px;}
		</style>
	</head>
	<body>
		<div id="aaa" style="float: right;"></div>
		<div id="" style="width: 680px;height: 360px;border: 3px solid red;" >
			<span id="ttt"style="position: fixed;font-size: 60px;">弹弹弹</span>
			<span id="bbb"style="position: fixed;font-size: 60px;">变变变</span>
		</div>
		<div id="tttxy"></div>
		<img id="pic" style="width: 240px; height: 180px; position: fixed;" src="../public/imgs/1.jpg"/>
	</body>
	<script type="text/javascript">	
		//飘图
		var x=0;
		var y=0;
		var a=true;
		var b=true;
		function move(){
			//x方向
			if(x<70&&a==true){
				++x;
			}else{
				a=false;
			}
			if(x>0&&a==false){
				x--;
			}else{
				a=true;
			}
			//y方向
			if(y<82&&b==true){
				y =y+1;
			}else{
				b=false;
			}
			if(y>0&&b==false){
				y--;
			}else{
				b=true;
			}
			aaa.innerHTML='x值：'+x+'; '+'y值：'+y;
			pic.style.top=x+'%';
			pic.style.left=y+'%';
		}
		//鼠标移入，移出
		var t= setInterval("move()",100);
		pic.onmouseover =function(){
			clearInterval(t);
		}
		pic.onmouseout=function(){
			t=setInterval("move()",100);
		}
		//弹弹弹
		var xp=0;
		var yp=0;
		var ap=true;
		var bp=true;
		function movep(){
			//x方向
			if(xp<500&&ap==true){
				++xp;
			}else{
				ap=false;
			}
			if(xp>0&&ap==false){
				xp--;
			}else{
				ap=true;
			}
			//y方向
			if(yp<300&&bp==true){
				yp =yp+10;
			}else{
				bp=false;
			}
			if(yp>0&&bp==false){
				yp--;
			}else{
				bp=true;
			}
			tttxy.innerHTML='弹弹的x值：'+xp+'; '+'y值：'+yp;
			ttt.style.left=xp+"px";
			ttt.style.top=yp+'px';			
			setTimeout("movep()",10);
		}
		movep();
		//变变变
		function bbbq(){
			var xb=Math.random()*500;
			xb=Math.round(xb);
			var yb=Math.random()*300;
			yb=Math.round(yb);
			bbb.style.left=xb+'px';
			bbb.style.top=yb+'px';
			setTimeout("bbbq()",100);			
		}
		bbbq();
	</script>
</html>